<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 20:55:53
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-16 15:21:32
 * @Description: 支付界面
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>选择支付方式</title>
</head>

<body>
    <header>
        <a href="#">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </a>
        选择支付方式
        <p></p>
    </header>

    <form action="#">
        <label for="zhifubao">
            <input id="zhifubao" value="1" type="radio" name="pay">
            <span class="icon">
                
                <img src="../img/user/支付-支付宝.svg" alt="">
            </span>
            支付宝支付
        </label>
        <label for="weixin">
            <input id="weixin" value="2" type="radio" name="pay">
            <span class="icon">
                <img src="../img/user/微信方.svg" alt="">
            </span>
            微信支付
        </label>
        <label for="yinlian">
            <input id="yinlian" value="3" type="radio" name="pay">
            <span class="icon">
                
                <img src="../img/user/银联.svg" alt="">
            </span>
            银联支付
        </label>

        <div onclick="history.back()" class="bottom-btn">付款</div>
    </form>
</body>

<style>
    label {
        display: block;
        height: 14.4vw;
        border-bottom: 0.13vw solid #eaeaea;
        display: flex;
        justify-content: left;
        align-items: center;
        padding-left: 3vw;
        box-sizing: border-box;
        font-size: 4.23vw;
        color: rgba(0, 0, 0, 0.8);
    }
    
    label>.icon {
        height: 100%;
        width: 7.8vw;
        display: flex;
        padding: 3vw;
        align-items: center;
    }
    
    label>.icon>img {
        height: 6.33vw;
    }
</style>

</html>